<template>
  <div>
    <van-nav-bar
      title="登录"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="login">
      <div class="Lon">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="username"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
              { required: true, message: '请填写手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
            ]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[
              { required: true, message: '请填写密码' },
              {
                validator: (i) => /^\w{6,12}$/.test(i),
                message: '密码格式为6-12位数字或字母',
              },
            ]"
          />
          <div style="margin: 16px">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              color="#4fc08d"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
      <router-link to="/registered" style="margin-left: 20px">
        没有账号?
        <a href="" style="color: blue"> 点击注册 </a>
      </router-link>

      <router-link to="/forget">
        <a href="" style="color: blue; float: right; margin-right: 20px"
          >忘记密码</a
        >
      </router-link>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user";

export default {
  data() {
    return {
      // editingContact: {},
      username: "",
      password: "",
    };
  },
  created() {},
  methods: {
    onSubmit(values) {
      // 数据检验成功
      console.log("submit", values);

      login(values).then((res) => {
        console.log(res);

        // 登陆成功  存储信息
        if (res.code == 0) {
          let { userInfo, token, uid, isLogin, tokenExpired } = res;

          this.$store.dispatch("getuserInfo", token);
          localStorage.setItem("token", token);
          localStorage.setItem("tokenExpired", tokenExpired);

          // this.$store.commit("save", ["uid", uid]);
          // this.$store.commit("save", ["token", token]);
          // this.$store.commit("save", ["userInfo", userInfo]);
          // this.$store.commit("save", ["isLogin", true]);

          setTimeout((v) => {
            this.$router.push('my');
          }, 800);
        } else {
        }
      });
    },
  },
};
</script>

<style lang="less">
.log-icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>